<template>
<div class="home" ref="home">
  数据报表
</div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import * as echarts from "echarts"
import request from "../request.js";
let myChart = ref(null)
let home = ref(null)
const state = reactive({
  dataList:{},
  outPut:[],
  cart:{}
})
let goodsName = reactive([])
let nums = reactive([])
onMounted(async () => {
  myChart.value = echarts.init(home.value)
  const load = () => {
    request.get("/goods").then(res => {
      state.dataList = res.data
      goodsName = state.dataList.map(v=>v.name)
      nums = state.dataList.map(v=>v.nums)
      console.log("nums"+nums)
      myChart.value.setOption({
        title: {
          text: '数据存储'
        },
        tooltip: {},
        xAxis: {
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          data: goodsName
        },
        yAxis: {

        },
        series: [
          {
            name: '服务器操作记录',
            type: 'bar',
            data: nums
          }
        ]
      });
    })
  }
  load()
})
</script>

<style scoped lang="scss">
.home{
  height: 380px;
}

</style>